<template>
  <div class="searchContainer">
    <div class="header">
      <!-- 页首搜索区域 -->
      <van-search
        class="search"
        v-model="value"
        show-action
        :placeholder="defaultKeyword.keyword"
        @search="onSearch"
        @cancel="onCancel"
        @input="timeSearch"
      />
      <!-- 历史记录 -->
      <div class="history" v-show="isShowHistory">
        <div class="historyTop">
          <div class="title">历史记录</div>
          <van-icon name="delete-o" class="delete" @click="deleteHistory" />
        </div>
        <div class="historyBottom">
          <div
            class="historyItem"
            v-for="(history, index) in historyList"
            :key="index"
            @click="searchOfHistory(history)"
          >
            {{ history }}
          </div>
        </div>
      </div>
      <!-- 实时关键字列表 -->
      <div class="timeKeyword" v-if="isShowTimeKeyword && timeKeywordList.length > 0">
        <div
          class="timeKeywordItem"
          v-for="(timeKeyword, index) in timeKeywordList"
          :key="index"
          @click="searchOfTimeKeyword(timeKeyword)"
        >
          <div class="keyword">{{ timeKeyword }}</div>
          <div class="arrow">></div>
        </div>
      </div>
      <!-- 热门关键字列表 -->
      <div class="hot" v-show="isShowHotKeyword && timeKeywordList.length === 0 && value === ''">
        <div class="title">热门搜索</div>
        <div class="tags">
          <span
            class="tag"
            :class="{ active: index === 0 }"
            v-for="(hotKeyword, index) in hotKeywordVOList"
            :key="index"
            @click="searchOfHotKeyword(hotKeyword.keyword)"
            >{{ hotKeyword.keyword }}</span
          >
        </div>
      </div>
    </div>
    <div class="main" v-show="isShowGoods && directlyList.length > 0 && val !== ''">
      <!-- 搜索列表区域 -->
      <div class="search">
        <!-- 综合、价格、分类区域 -->
        <div class="searchHeader">
          <div class="searchHeaderLeft active">综合</div>
          <div class="searchHeaderCenter">
            <div class="price active">价格</div>
            <div class="arrows">
              <div class="arrowsTop">^</div>
              <div class="arrowsBottom">^</div>
            </div>
          </div>
          <div class="searchHeaderRight active">分类</div>
        </div>
        <div class="searchMain"></div>
      </div>
      <!-- 商品列表区域 -->
      <div class="goods">
        <div class="goodItem" v-for="directly in directlyList" :key="directly.id">
          <div class="goodItemImg">
            <img :src="directly.listPicUrl" class="goodItemBig" alt="" />
            <img :src="directly.topLogo.logoUrl" class="topLogo" alt="" />
          </div>
          <div class="goodItemContext">
            <img
              v-if="directly.preLogo[0]"
              :src="directly.preLogo[0].logoUrl"
              class="preLogo"
              alt=""
            />{{ directly.name }}
          </div>
          <div class="use" v-if="directly.itemTagList[0]">
            <img
              src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png"
              class="useImg"
              alt=""
            />
            <div class="useContext">{{ directly.itemTagList[0].name }}</div>
          </div>
          <div class="price" v-if="directly.finalPriceInfoVO.priceInfo.finalPrice">
            <span class="newPrice">
              {{
                directly.finalPriceInfoVO.priceInfo.finalPrice.prefix
                  ? directly.finalPriceInfoVO.priceInfo.finalPrice.prefix + '￥'
                  : '' + '￥'
              }}<span class="newPricePrice">{{
                directly.finalPriceInfoVO.priceInfo.finalPrice.price
              }}</span></span
            >
            <span class="oldPrice">￥{{ directly.finalPriceInfoVO.priceInfo.counterPrice }}</span>
          </div>
          <div class="specialPrice" v-if="directly.finalPriceInfoVO.banner">
            <div class="left" v-if="directly.finalPriceInfoVO.banner.title">
              {{ directly.finalPriceInfoVO.banner.title }}
            </div>
            <div class="left1" v-else-if="directly.finalPriceInfoVO.banner.price">
              {{
                directly.finalPriceInfoVO.banner.price.prefix +
                '￥' +
                directly.finalPriceInfoVO.banner.price.price
              }}
            </div>
            <div
              class="right"
              v-if="
                directly.finalPriceInfoVO.banner.title || directly.finalPriceInfoVO.banner.content
              "
            >
              {{ directly.finalPriceInfoVO.banner.content }}
            </div>
            <div class="left2" v-else-if="!directly.finalPriceInfoVO.banner.title">
              {{ directly.finalPriceInfoVO.banner.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'VSearch'
})
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import { useSearchStore } from '../../stores/search'
import { storeToRefs } from 'pinia'
import { debounce } from 'lodash'

const router = useRouter()
const value = ref('')

// 是否展示实时关键字区域
const isShowTimeKeyword = ref(false)

// 是否展示商品区域
const isShowGoods = ref(false)

// 是否展示热门搜索区域
const isShowHotKeyword = ref(true)

// 是否展示历史记录区域
const isShowHistory = ref(true)

// 获取搜索仓库的实例
const searchStore = useSearchStore()

// 分类列表
const { categoryL1List } = storeToRefs(searchStore)

// 商品列表
const { directlyList } = storeToRefs(searchStore)

// 历史记录列表
const { historyList } = storeToRefs(searchStore)

// 搜索商品的函数
const onSearch = () => {
  // showToast(val)
  searchStore.getSearchGoods(value.value)
  searchStore.addHistory(value.value)
  isShowTimeKeyword.value = false
  // isShowHotKeyword.value = true
  isShowGoods.value = true
}
const onCancel = () => {
  showToast('取消')
  isShowGoods.value = true
  isShowTimeKeyword.value = false
  // isShowHotKeyword.value = false
  router.back()
}

// 默认关键字
const { defaultKeyword } = storeToRefs(searchStore)

// 热门关键字列表
const { hotKeywordVOList } = storeToRefs(searchStore)

// 获取默认关键字和热门关键字列表的函数
const getKeyWord = () => {
  searchStore.getSearchInit()
}

onMounted(() => {
  // 获取默认关键字和热门关键字的函数
  getKeyWord()
})

// 实时关键字列表
const { timeKeywordList } = storeToRefs(searchStore)

// 获取实时关键字列表的函数
const timeSearch = debounce(() => {
  searchStore.getSearchAutoComplete(value.value)
  isShowTimeKeyword.value = true
  isShowGoods.value = false
  // isShowHotKeyword.value = false
}, 300)

// 点击实时关键字的函数
const searchOfTimeKeyword = (timeKeyword: string) => {
  isShowTimeKeyword.value = false
  // isShowHotKeyword.value = false
  isShowGoods.value = true
  value.value = timeKeyword
  onSearch()
}

// 点击热门关键字的函数
const searchOfHotKeyword = (hotKeyword: string) => {
  // isShowHotKeyword.value = false
  isShowTimeKeyword.value = false
  isShowGoods.value = true
  isShowHistory.value = false
  value.value = hotKeyword
  onSearch()
}

// 删除历史记录
const deleteHistory = () => {
  searchStore.deleteHistory()
}

// 根据历史记录搜索
const searchOfHistory = (history: string) => {
  value.value = history
  onSearch()
}
</script>

<style scoped lang="less">
.searchContainer {
  background-color: #f4f4f4;
  height: 100vh;
  .header {
    // background-color: #ffffff;
    // 页首搜索区域
    .search {
      padding: 10px 20px;
    }
    // 历史记录区域
    .history {
      padding: 0 20px;
      background-color: white;
      .historyTop {
        display: flex;
        justify-content: space-between;
        color: #999999;
        .title {
          font-size: 14px;
        }
        .delete {
          font-size: 20px;
          color: #333333;
        }
      }
      .historyBottom {
        margin: 10px 0;
        display: flex;
        flex-wrap: wrap;
        .historyItem {
          font-size: 12px;
          color: #333333;
          border: 1px solid gray;
          padding: 6px;
          border-radius: 6px;
          margin: 0 16px 16px 0;
        }
      }
    }
    // 实时关键字列表
    .timeKeyword {
      padding: 0 20px;
      .timeKeywordItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #333333;
        border-bottom: 1px solid gray;
        height: 50px;
        box-sizing: border-box;
      }
    }
    // 热门关键字列表
    .hot {
      background-color: white;
      padding: 0 20px;
      margin-top: 20px;
      .title {
        font-size: 14px;
      }
      .tags {
        margin: 10px 0;
        display: flex;
        flex-wrap: wrap;
        .tag {
          font-size: 12px;
          border: 1px solid gray;
          padding: 6px;
          border-radius: 6px;
          margin: 0 16px 16px 0;
        }
        .active {
          color: red;
        }
      }
    }
  }
  .main {
    // 搜索列表区域
    .search {
      .searchHeader {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        height: 40px;
        border-bottom: 1px solid lightgray;
        .searchHeaderCenter {
          display: flex;
          height: 21px;
          .arrows {
            font-size: 12px;
            display: flex;
            flex-direction: column;
            .arrowsTop {
              height: 10.5px;
            }
            .arrowsBottom {
              height: 10.5px;
              transform: rotate(180deg);
            }
          }
        }
      }
    }
    // 商品列表区域
    .goods {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .goodItem {
        width: 172.5px;
        height: 302.5px;
        .goodItemImg {
          position: relative;
          .goodItemBig {
            width: 172.5px;
            height: 172.5px;
            border-radius: 12px;
          }
          .topLogo {
            width: 52.5px;
            height: 27px;
            position: absolute;
            top: 5px;
            right: 5px;
          }
        }
        .goodItemContext {
          font-size: 14px;
          .preLogo {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
        .use {
          display: flex;
          align-items: center;
          border: 1px solid gray;
          width: 66px;
          height: 15px;
          border-radius: 20px;
          text-align: center;
          .useImg {
            width: 10px;
            height: 10px;
          }
          .useContext {
            font-size: 12px;
          }
        }
        .price {
          color: #fa1e32;
          .newPrice {
            font-size: 12px;
            font-weight: bold;
            .newPricePrice {
              font-size: 20px;
            }
          }
          .oldPrice {
            font-size: 12px;
            text-decoration: line-through;
            color: #999999;
          }
        }
        .specialPrice {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: bold;
          background-color: #ffe9eb;
          height: 23px;
          border-radius: 20px;
          .left {
            background-color: #fa1e32;
            border-radius: 20px;
            width: 36px;
            height: 19px;
            color: white;
            text-align: center;
            padding: 0 5px;
          }
          .left1 {
            text-indent: 8px;
            color: #fa1e32;
            height: 19px;
          }
          .left2 {
            color: #ffffff;
            background-color: #fa1e32;
            border-radius: 20px;
            padding: 0 5px;
          }
          .right {
            text-indent: 12px;
            color: #fa1e32;
          }
        }
      }
    }
  }
}
</style>
